import ProForm, { ProFormText } from '@ant-design/pro-form';
import { PageContainer } from '@ant-design/pro-layout';
import { useForm } from 'antd/es/form/Form';
import React, { useState } from 'react';
import {Button, Space} from "antd";
import {CheckOutlined, UndoOutlined} from "@ant-design/icons";
const Index: React.FC = (props) => {
  const [form] = useForm();

  const formLayout = {
    labelCol: {
      span: 8,
    },
    wrapperCol: {
      span: 12,
    },
  };

  const onReset = () => {};

  const onSubmit = (values) => {};

  const [checkObj, setCheckObj] = useState({});
  return (
    <PageContainer
      header={{
        title: '修改密码',
      }}
    >
      <ProForm
        form={form}
        layout="horizontal"
        {...formLayout}
        initialValues={{}}
        onFinish={onSubmit}
        onReset={onReset}
        submitter={{
          render: (_, dom) => (
            <div style={{ display: 'flex', justifyContent: 'center' }}>
              <Space>
                {/*{dom}*/}
                {<Button onClick={() => {
                  _.reset()
                }}><UndoOutlined />重置</Button>}
                {<Button type={"primary"} onClick={() => {
                  _.submit()
                }}><CheckOutlined />保存</Button>}

              </Space>
            </div>
          ),
        }}
      >
        <ProFormText.Password
          rules={[
            {
              required: true,
              message: '原登陆密码必填！',
            },
          ]}
          width="md"
          name="oldPassword"
          placeholder="请输入原登陆密码"
          label="原登陆密码"
        />

        <ProFormText.Password
          rules={[
            {
              required: true,
              message: '新密码必填！',
            },
          ]}
          hasFeedback
          width="md"
          placeholder="请输入新密码！"
          name="newPassword"
          label="新密码"
          onBlur={(e) => {
            const pass = form.getFieldValue('newPassword2');
            if (pass === e.target.value) {
              setCheckObj({
                status: 'success',
                // msg:'前后2次密码不一致'
              });
            } else {
              setCheckObj({
                status: 'error',
                msg: '前后2次密码不一致',
              });
            }
          }}
        />
        <ProFormText.Password
          hasFeedback
          validateStatus={checkObj.status}
          help={checkObj.msg}
          rules={[
            {
              required: true,
              message: '确认密码必填！',
            },
          ]}
          width="md"
          placeholder="请输入确认密码！"
          onBlur={(e) => {
            const pass = form.getFieldValue('newPassword');
            if (!pass) {
              setCheckObj({
                status: 'error',
                msg: '请输入新密码',
              });
              return;
            }
            if (pass === e.target.value) {
              setCheckObj({
                status: 'success',
                // msg:'前后2次密码不一致'
              });
            } else {
              setCheckObj({
                status: 'error',
                msg: '前后2次密码不一致',
              });
            }
          }}
          name="newPassword2"
          label="确认密码"
        />
      </ProForm>
    </PageContainer>
  );
};

export default Index;
